//物流信息

import React, { useState, useEffect } from "react";
import { Timeline, Empty, Button } from "antd";
import { CommonModal } from "@/pages/OrderModule/common/components/CommonModal";
import CommonLoading from "@/components/CommonLoading";
import Api from "../../service";
import "./index.less";
import moment from "moment";

const LogisticsModal = ({ rowData, handleCancel }) => {
	const [data, setData] = useState({}); //物流轨迹
	const [loading, setLoading] = useState(false);
	const [open, setOpen] = useState(false);
	useEffect(() => {
		setOpen(true);
		if (rowData.logisticsCompanyId && rowData.logisticsNo) {
			handleGetOrderDynamic();
		}
	}, []);

	//获取物流轨迹
	const handleGetOrderDynamic = async () => {
		setLoading(true);
		const { success, data = {} } = await Api.getOrderDynamic({
			erpressId: rowData.logisticsCompanyId,
			logistics: rowData.logisticsNo
		});
		if (success) {
			setData(data);
		}
		setLoading(false);
	};

	const onCancel = () => {
		setOpen(false);
	}

	return (
		<CommonModal
			footer={[
				<Button key="save" onClick={onCancel}>
					关闭
				</Button>
			]}
			title={{ title: "查看物流" }}
			open={open}
			width="600px"
			onCancel={onCancel}
			afterClose={handleCancel}
		>
			{rowData?.logisticsCompanyName ? (
				<div>
					<div className="logistics-box">
						<div className="logistics-item">
							<span>系统订单号：</span>
							<span>{rowData.orderSn}</span>
						</div>
						<div className="logistics-item">
							<span>快递：</span>
							<span>{rowData.logisticsCompanyName}</span>
						</div>
						<div className="logistics-item">
							<span>运单号：</span>
							<span>{rowData.logisticsNo || "暂无信息"}</span>
						</div>

						<div className="logistics-item">
							<span>发货时间：</span>
							<span>{rowData.deliveryTime ? moment(rowData.deliveryTime).format('YYYY-MM-DD HH:mm:ss') : "暂无信息"}</span>
						</div>
					</div>
					<Timeline className="time-line" mode="left">
						{(data?.deliverInfo || []).map((item, index) => {
							return (
								<Timeline.Item key={index} label={item.ftime}>
									{item.context}
								</Timeline.Item>
							);
						})}
					</Timeline>
				</div>
			) : (
				<Empty description="暂无数据" />
			)}
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default LogisticsModal;
